<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>员工vue</title>
	<link rel="stylesheet" href="element.min.css">
	<script src="vue.js"></script>
	<script src="axios.js"></script>
	<script src="element.min.js"></script>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.main{
		width: 96%;
		margin: 0 auto;
		padding-top: 20px;
	}
	a{
		text-decoration: none;
	}
</style>
<body>
	<div id="root">
		<el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" default-active="1" active-text-color="#ffd04b">
			<el-menu-item index="0">
				<i class="el-icon-menu"></i>
				<span>首页</span>
			</el-menu-item>
			<el-menu-item index="1"><span>员工信息</span></el-menu-item>
			<el-menu-item index="2"><a href="cheakon.html">考勤管理</a></el-menu-item>
		</el-menu>
		<div class="main">
			<el-button type="primary" icon="el-icon-plus" @click="addData3">添加新员工</el-button>
			<el-table :data="workdata" style="width: 100%">
		     	<el-table-column prop="ID" label="员工编号"></el-table-column>
		       	<el-table-column prop="name" label="姓名"></el-table-column>
	       		<el-table-column prop="sex" label="性别"> </el-table-column>
	       		<el-table-column prop="birthday" label="出生日期"> </el-table-column>
	       		<el-table-column prop="department" label="部门"> </el-table-column>
	       		<el-table-column prop="status" label="在职状态">
	       			<template slot-scope="data">
						 <el-tooltip :content="data.row.joinDate" placement="top-start">
					      	<el-tag size="mini" type="success" close="tag" v-if="data.row.status">在职</el-tag>
					    </el-tooltip>
					     <el-tooltip :content="data.row.leaveDate" placement="top-start">
					      	<el-tag size="mini" type="danger" close="tag1" v-if="!data.row.status">离职</el-tag>
					    </el-tooltip>
					</template>
	       		</el-table-column>
	       		<el-table-column prop="joinDate" label="入职时间"> </el-table-column>
	       		<el-table-column prop="leaveDate" label="离职时间"> </el-table-column>
	       		<el-table-column prop="salary" label="薪资"> </el-table-column>
	       		<el-table-column prop="IDCard" label="身份证号码"> </el-table-column>
	       		<el-table-column prop="number" label="手机号"> </el-table-column>
	       		<el-table-column label="操作" width="200">
					<template slot-scope="data">
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="editData(data.row)"></el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteuser(data.row.ID)"></el-button>
					</template>
	       		</el-table-column>
	    	</el-table>
			<el-dialog title="修改员工信息" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" center>
					<el-form class="ipt">
						<el-form-item label="ID">
					    	<el-input v-model="ipt.ID" disabled></el-input>
					  	</el-form-item>

						<el-form-item label="姓名">
					    	<el-input v-model="ipt.name"></el-input>
					  	</el-form-item>

					  	<el-form-item label="性别">
					    	<el-radio v-model="ipt.sex" label="1">男</el-radio>
					    	<el-radio v-model="ipt.sex" label="0">女</el-radio>
					  	</el-form-item>

					  	<el-form-item label="出生日期">
					    	<el-input v-model="ipt.birthday"></el-input>
					  	</el-form-item>

					  	<el-form-item label="所属部门">
					    	<el-input v-model="ipt.department"></el-input>
					  	</el-form-item>
					  	<el-form-item label="">
					    	<el-switch v-model="ipt.status" active-text="在职" inactive-text="离职">
							</el-switch>
					  	</el-form-item>

					  	<el-form-item label="入职时间">
					    	<el-input v-model="ipt.joinDate"></el-input>
					  	</el-form-item>
					  	<el-form-item label="离职时间">
					    	<el-input v-model="ipt.leaveDate"></el-input>
					  	</el-form-item>

					  	<el-form-item label="薪资">
					    	<el-input v-model="ipt.salary"></el-input>
					  	</el-form-item>

					  	<el-form-item label="身份证">
					    	<el-input v-model="ipt.IDCard"></el-input>
					  	</el-form-item>
					  	<el-form-item label="手机号">
					    	<el-input v-model="ipt.number"></el-input>
					  	</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button type="warning" size="mini" @click="sure">确 定</el-button>
						<el-button type="info" size="mini" @click="cancel">取 消</el-button>
					</div>
			</el-dialog>
			<el-dialog title="添加员工信息" :visible.sync="dialogVisible2" width="30%" :close-on-click-modal="false" center>
					<el-form class="ipt">
						<el-form-item label="姓名">
					    	<el-input v-model="adduser.name"></el-input>
					  	</el-form-item>

					  	<el-form-item label="性别">
					    	<el-radio v-model="adduser.sex" label="1">男</el-radio>
					    	<el-radio v-model="adduser.sex" label="0">女</el-radio>
					  	</el-form-item>

					  	<el-form-item label="出生日期">
					    	<el-input v-model="adduser.birthday"></el-input>
					  	</el-form-item>

					  	<el-form-item label="所属部门">
					    	<el-input v-model="adduser.department"></el-input>
					  	</el-form-item>

					  	<el-form-item label="在职状态">
					    	<el-input v-model="adduser.status"></el-input>
					  	</el-form-item>
					  	<el-form-item label="入职时间">
					    	<el-input v-model="adduser.joinDate"></el-input>
					  	</el-form-item>
					  	<el-form-item label="离职时间">
					    	<el-input v-model="adduser.leaveDate"></el-input>
					  	</el-form-item>

					  	<el-form-item label="薪资">
					    	<el-input v-model="adduser.salary"></el-input>
					  	</el-form-item>

					  	<el-form-item label="身份证">
					    	<el-input v-model="adduser.IDCard"></el-input>
					  	</el-form-item>

					  	<el-form-item label="手机号">
					    	<el-input v-model="adduser.number"></el-input>
					  	</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button type="warning" size="mini" @click="addData2">确 定</el-button>
						<el-button type="info" size="mini" @click="addData">取 消</el-button>
					</div>
			</el-dialog>
		</div>
	</div>
	<script>
		var root= new Vue({
			el:"#root",
			data:{
				ipt:{
					ID:"",
					name:"",
					sex:"",
					birthday:"",
					department:"",
					status:"",
					joinDate:"",
					leaveDate:"",
					salary:"",
					IDCard:"",
					number:""
				},
				adduser:{
					ID:"",
					name:"",
					sex:"",
					birthday:"",
					department:"",
					status:"",
					joinDate:"",
					leaveDate:"",
					salary:"",
					IDCard:"",
					number:""
				},
				dialogVisible:false,
				dialogVisible2:false,
				value:true,
				workdata:[],
				isdialogshow:false
			},
			methods:{
				addData3(){
					this.dialogVisible2=true;
				},
				//查询
				seldata(){
					axios.get("http://127.0.0.1:89/getData").then(function(response){
						for(let i=0;i<response.data.length;i++){
						if(response.data[i].sex == 1){
							response.data[i].sex = "男";
						}else{
							response.data[i].sex = "女";
						}
					}
						if(response.data=="error"){
							alert("查询失败！");
						}else{
							root.workdata=response.data;
						}
					})
				},
				//删除
				deleteuser(ID){
			    	  root.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			        	axios.get("http://127.0.0.1:89/deleteData?ID="+ID).then(function(response){
							if(response.data=="success"){
			        		  root.$message({
					            type: 'success',
					            message: '删除成功!'
					          });
				        		root.chaxun();
				        	}else{
			        		  root.$message({
					            type: 'info',
					            message: '删除失败'
					          });    
				        	}
				        	
					     })
			        	
			        }).catch(() => {
			          root.$message({
			            type: 'info',
			            message: '已取消删除'
			          });          
			        });
				},
				sure(){
						root.$confirm('此操作将修改员工信息, 是否继续?', '提示', {
					          confirmButtonText: '确定',
					          cancelButtonText: '取消',
					          type: 'warning'
				        }).then(function(){
						axios.get("http://127.0.0.1:89/editData",{
							params:{
								ID:root.ipt.ID,
								name:root.ipt.name,
								sex:root.ipt.sex,
								birthday:root.ipt.birthday,
								department:root.ipt.department,
								status:root.ipt.status,
								joinDate:root.ipt.joinDate,
								leaveDate:root.ipt.leaveDate,
								salary:root.ipt.salary,
								IDCard:root.ipt.IDCard,
								number:root.ipt.number
							}
						}).then(function(response){
							if(response.data=="success"){
							 	root.$message({
						            type: 'success',
						            message: '编辑成功!'
					          	});
								root.dialogVisible=false
								root.seldata();

							}else{
								root.$message({
						            type: 'info',
						            message: '编辑失败!'
					          	});

							}
						})
			        }).catch(function(){
			        	root.$message({
				            type: 'info',
				            message: '取消编辑!'
			          	});
			        })
				},
				editData(box){
					root.dialogVisible=true;
					for(let i in box){
						this.ipt[i] = box[i]
					}
					if(this.ipt.sex == "男"){
						this.ipt.sex = "1";
					}else{
						this.ipt.sex = "0";
					}
					console.log(this.ipt.name)
				},
				cancel(){
					root.dialogVisible=false
					root.$message({
			            type: 'info',
			            message: '取消编辑!'
		          	});
				},
				addData(){
					root.dialogVisible2=false;
					root.$message({
			            type: 'info',
			            message: '已取消添加'
		          	});

				},
				addData2(){
					root.dialogVisible2=false;
			        	axios.get("http://127.0.0.1:89/addData2",{
							params:{
								name:root.adduser.name,
								sex:root.adduser.sex,
								birthday:root.adduser.birthday,
								department:root.adduser.department,
								status:root.adduser.status,
								joinDate:root.adduser.joinDate,
								leaveDate:root.adduser.leaveDate,
								salary:root.adduser.salary,
								IDCard:root.adduser.IDCard,
								number:root.adduser.number
							}
						}).then((response)=>{
							if(response.data=="success"){
							 	root.$message({
						            type: 'success',
						            message: '添加成功!'
					          	});
								
								root.seldata();

							}else{
								root.$message({
						            type: 'info',
						            message: '添加失败!'
					          	});

							}
			        })
			 
				}
			},	
			mounted(){
				this.seldata();  
			}
		})
	</script>
</body>
</html>